<template>
  <div class="login">
    <div class="name">广东省心血管病质控管理平台</div>
    <div class="main">
      <div class="loginStyle">
        <div
          class="item"
          @click="changeLogin(item.id)"
          v-for="item in loginList"
          :key="item.id"
        >
          <div class="title">{{ item.name }}</div>
          <div class="hrActive" v-if="loginType == item.id">
            <div class="left"></div>
            <div class="special"></div>
            <div class="left"></div>
          </div>
          <div class="hr" v-else></div>
        </div>
      </div>
      <div class="inputBox">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="accountNumber">
            <el-input
              v-model.trim="ruleForm.accountNumber"
              placeholder="请输入账号"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model.trim="ruleForm.password"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="btn" @click="submitForm('ruleForm')">登录</div>
    </div>
    <div class="foot">
      <div>政策文件</div>
      <div style="margin-top: 8px">
        <a
          href="http://image.scheartmed.com/16862773435252021%E5%B9%B4%E8%B4%A8%E6%8E%A7%E8%A6%81%E6%B1%82.pdf"
          target="_blank"
          class="tip-txt"
          >心血管系统疾病相关专业医疗质量控制指标（2021年版）</a
        >

        <a
          href="http://image.scheartmed.com/16862775039632023 年国家医疗质量安全改进目标.pdf"
          target="_blank"
          class="tip-txt margin-16"
          >2023年国家医疗质量安全改进目标</a
        >
        <a
          class="tip-txt margin-16"
          href="http://image.scheartmed.com/16862775738592023年专业要求.pdf"
          target="_blank"
          >2023年各专业质控工作改进目标</a
        >
      </div>
    </div>
  </div>
</template>

<script>
import debounce from '@/utils/js/debounce';

export default {
  name: 'LoginPage',
  data() {
    return {
      // 0--二级医院登录  1--质控中心登录
      loginType: 0,
      loginList: [
        {
          name: '各级医院登录',
          id: 0,
        },
        {
          name: '质控中心登录',
          id: 1,
        },
      ],
      ruleForm: {
        accountNumber: '',
        password: '',
      },
      rules: {
        accountNumber: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      routerList: [],
    };
  },
  mounted() {
    this.enterEvent();
  },
  methods: {
    // 切换登录方式
    changeLogin(id) {
      this.loginType = id;
      sessionStorage.setItem('loginStyle', id); // 登录方式
    },

    //  获取菜单-医院/后台
    getRouter() {
      // 定义初始路由顺序
      let routerArr = [
        {
          name: '医院管理',
        },
        {
          name: '患者管理',
        },
        {
          name: '质控报表',
        },
        {
          name: '系统设置',
        },
      ];
      // 0--二级医院登录  1--质控中心登录
      let loginStyle = sessionStorage.getItem('loginStyle');
      let params = {
        roleId: sessionStorage.getItem('roleId'),
      };
      let arr = [],
        newArr = [];
      if (loginStyle == 0) {
        this.$http
          .getHPermissionByRoleIdHospital(params)
          .then(res => {
            let { code, data } = res;
            if (code == '0000000000' && data.length) {
              data[0].children.forEach(item => {
                item.newArr = [];
                item.children.forEach(ite => {
                  item.newArr.push({
                    sonName: ite.name,
                    sonPath: ite.permission,
                  });
                });
                arr.push({
                  path: item.permission,
                  name: item.name,
                  children: item.newArr,
                  isOpen: false,
                });
              });

              // 如果当前角色有路由权限，就跳转到路由权限的第一个页面，如果没有就限制登录
              if (arr.length) {
                routerArr.forEach(item => {
                  arr.forEach(ite => {
                    if (item.name == ite.name) newArr.push(ite);
                  });
                });

                let path = newArr[0].path;
                this.$router.push(path);
                this.$message({
                  showClose: true,
                  message: '登录成功！',
                  type: 'success',
                });
              } else {
                this.$message({
                  showClose: true,
                  message: '当前账号无权限登录',
                  type: 'error',
                });
              }
            } else {
              this.$message({
                showClose: true,
                message: '当前账号无权限登录',
                type: 'error',
              });
            }
          })
          .catch(() => {});
      } else {
        this.$http
          .getSPermissionByRoleIdSystem(params)
          .then(res => {
            let { code, data } = res;
            if (code == '0000000000' && data.length) {
              data[0].children.forEach(item => {
                item.newArr = [];
                item.children.forEach(ite => {
                  item.newArr.push({
                    sonName: ite.name,
                    sonPath: ite.permission,
                  });
                });
                arr.push({
                  path: item.permission,
                  name: item.name,
                  children: item.newArr,
                  isOpen: false,
                });
              });

              // 如果当前角色有路由权限，就跳转到路由权限的第一个页面，如果没有就限制登录
              if (arr.length) {
                routerArr.forEach(item => {
                  arr.forEach(ite => {
                    if (item.name == ite.name) newArr.push(ite);
                  });
                });

                let path = newArr[0].path;
                this.$router.push(path);
                this.$message({
                  showClose: true,
                  message: '登录成功！',
                  type: 'success',
                });
              } else {
                this.$message({
                  showClose: true,
                  message: '当前账号无权限登录',
                  type: 'error',
                });
              }
            } else {
              this.$message({
                showClose: true,
                message: '当前账号无权限登录',
                type: 'error',
              });
            }
          })
          .catch(() => {});
      }
    },

    //  登录
    submitForm: debounce(function (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '登录中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          });

          let params = this.ruleForm;
          params.loginType = this.loginType;

          this.$http
            .Login(params)
            .then(res => {
              if (res.code == '0000000000') {
                sessionStorage.setItem('loginStyle', this.loginType); // 登录方式
                sessionStorage.setItem('token', res.data.token);
                sessionStorage.setItem('roleId', res.data.roleId); // 角色id
                sessionStorage.setItem('accountId', res.data.accountId); // 账号id
                sessionStorage.setItem('userName', res.data.name); // 用户名
                if (res.data.hospitalId) {
                  sessionStorage.setItem('hospitalId', res.data.hospitalId); //医院id
                }

                if (res.data.hospitalName) {
                  sessionStorage.setItem('hospitalName', res.data.hospitalName); //医院id
                }

                if (res.data.logo) {
                  sessionStorage.setItem('logo', res.data.logo); // logo
                }

                // 获取当前登录角色的路由权限
                this.getRouter();
                loading.close();
              } else {
                loading.close();
              }
            })
            .catch(() => {});
        } else {
          return false;
        }
      });
    }),

    // 键盘回车事件
    enterEvent() {
      document.onkeydown = e => {
        let key;
        let locationUrl = location.hash;
        // eslint-disable-next-line no-undefined
        if (window.event === undefined) {
          key = e.keyCode;
        } else {
          key = window.event.keyCode;
        }
        if (key === 13 && locationUrl.slice(1, locationUrl.length) == '/') {
          this.submitForm('ruleForm');
        }
      };
    },
  },
};
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  background: url('@/assets/images/login.png') no-repeat;
  overflow: auto;
  background-size: cover;
  // text-align: center;
  align-items: center;
  box-sizing: border-box;

  .name {
    font-size: 46px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 133px;
    margin-bottom: 38px;
  }
  .main {
    width: 460px;
    height: 540px;
    background: #ffffff;
    box-shadow: 0 14px 20px 0 rgba(1, 86, 177, 0.2);
    border-radius: 8px;
    // margin: 0 auto;
    padding: 0 52px;
    padding-top: 65px;
    box-sizing: border-box;

    .loginStyle {
      display: flex;
      .item {
        width: 178px;
        cursor: pointer;
        .title {
          font-size: 18px;
          font-weight: 400;
          color: #111111;
        }
        .hr {
          width: 178px;
          height: 2px;
          background: #e9e8eb;
          margin-top: 24px;
        }
        .hrActive {
          width: 178px;
          display: flex;
          margin-top: 24px;
          .left {
            width: 84px;
            height: 2px;
            background: #0972e2;
          }
          .special {
            border-top: 2px solid #0972e2;
            border-left: 2px solid #0972e2;
            width: 8px;
            height: 8px;
            transform: rotate(45deg);
            margin-top: -4px;
          }
        }
      }
    }
    .inputBox {
      margin-top: 32px;
      /deep/ .el-form {
        .el-form-item {
          margin-bottom: 32px;
        }
        .el-input__inner {
          border: 0;
          border-bottom: 1px solid #dcdfe6;
          border-radius: 0;
        }
      }
    }
    .btn {
      width: 356px;
      height: 61px;
      background: #0a73e4;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin-top: 75px;
    }
  }
  .foot {
    margin-top: 100px;
    padding-bottom: 29px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 22px;
    .tip-txt {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 22px;
      border-bottom: 1px solid #ffffff;
    }
    .margin-16 {
      margin-left: 16px;
    }
  }
}
</style>
